<template>
    <div v-if="modelValue" class="modal" @click="cloeModal">
        <button class="close" @click="$emit('close-model')">X</button>
        <teleport to="body">
            <div class="modal-content">
                <h2>{{ content }}</h2>
                <button class="btn" @click="closeModal">关闭</button>
            </div>
        </teleport >
    </div>
  </template>
  <script setup>

  import { ref,watchEffect} from "vue";
  const content =ref('模态框内容')
  const {modelValue} = defineProps({ modelValue: Boolean})
  const emits = defineEmits(["update:modelValue"])
  const closeModal = () => {
    emits("update:modelValue",false)
  }
  const cloeModal = () => {
    modelValue.value = false
  }
  </script>

<style scoped>
.modal{

}
    .modal-content {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 800px;
    height: 500px;
    background-color: rgb(39, 134, 193);
    }
    .btn{
        color: rgb(183, 104, 0);
    }
    .close {
            position: absolute;
            right: 10px;
            top: 5px;
            padding: 5px;
            border: none;
            cursor: pointer;
        }
</style>